/*
 * uCharts®
 * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
 * Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
 * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
 * 复制使用请保留本段注释，感谢支持开源！
 *
 * uCharts®官方网站
 * https://www.uCharts.cn
 *
 * 开源地址:
 * https://gitee.com/uCharts/uCharts
 *
 * uni-app插件市场地址：
 * http://ext.dcloud.net.cn/plugin?id=271
 *
 */

// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
const color = [
  '#1890FF',
  '#91CB74',
  '#FAC858',
  '#EE6666',
  '#73C0DE',
  '#3CA272',
  '#FC8452',
  '#9A60B4',
  '#ea7ccc'
];

//事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
const formatDateTime = (timeStamp, returnType) => {
  var date = new Date();
  date.setTime(timeStamp * 1000);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? '0' + m : m;
  var d = date.getDate();
  d = d < 10 ? '0' + d : d;
  var h = date.getHours();
  h = h < 10 ? '0' + h : h;
  var minute = date.getMinutes();
  var second = date.getSeconds();
  minute = minute < 10 ? '0' + minute : minute;
  second = second < 10 ? '0' + second : second;
  if (returnType == 'full') {
    return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
  }
  if (returnType == 'y-m-d') {
    return y + '-' + m + '-' + d;
  }
  if (returnType == 'h:m') {
    return h + ':' + minute;
  }
  if (returnType == 'h:m:s') {
    return h + ':' + minute + ':' + second;
  }
  return [y, m, d, h, minute, second];
};

const cfu = {
  //demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
  type: [
    'pie',
    'ring',
    'rose',
    'word',
    'funnel',
    'map',
    'arcbar',
    'line',
    'column',
    'mount',
    'bar',
    'area',
    'radar',
    'gauge',
    'candle',
    'mix',
    'tline',
    'tarea',
    'scatter',
    'bubble',
    'demotype'
  ],
  range: [
    '饼状图',
    '圆环图',
    '玫瑰图',
    '词云图',
    '漏斗图',
    '地图',
    '圆弧进度条',
    '折线图',
    '柱状图',
    '山峰图',
    '条状图',
    '区域图',
    '雷达图',
    '仪表盘',
    'K线图',
    '混合图',
    '时间轴折线',
    '时间轴区域',
    '散点图',
    '气泡图',
    '自定义类型'
  ],
  //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
  //自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
  categories: [
    'line',
    'column',
    'mount',
    'bar',
    'area',
    'radar',
    'gauge',
    'candle',
    'mix',
    'demotype'
  ],
  //instance为实例变量承载属性，不要删除
  instance: {},
  //option为opts及eopts承载属性，不要删除
  option: {},
  //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
  formatter: {
    yAxisDemo1: function (val, index, opts) {
      return val + '元';
    },
    yAxisDemo2: function (val, index, opts) {
      return val.toFixed(2);
    },
    xAxisDemo1: function (val, index, opts) {
      return val + '年';
    },
    xAxisDemo2: function (val, index, opts) {
      return formatDateTime(val, 'h:m');
    },
    seriesDemo1: function (val, index, series, opts) {
      return val + '元';
    },
    tooltipDemo1: function (item, category, index, opts) {
      let titleName = category.split('/') || [];
      return `
    <div style="
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 10px;
      border-radius: 4px;
      color: white;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    ">
      <div style="font-size:14px;font-weight:bold;margin-bottom:5px;">
        ${category}
      </div>
      <div style="display:flex;align-items:center;">
        <span style="
          display:inline-block;
          width:10px;
          height:10px;
          background:${opts.color[item.seriesIndex]};
          margin-right:5px;
          border-radius:50%;
        "></span>
        ${item.seriesName}: ${item.data}
      </div>
    </div>
  `;
      const result1 = `<div style="min-width: 200px;border:none;">
                <div style="padding:4px 0 4px 0;text-align:left;width:100%;font-size: 16px;font-weight:bold;color: #000000;border-bottom:1px solid #d9d9d9;">
                  ${
                    titleName[0].length > 2
                      ? titleName[0] + '年' + titleName[1] + '月'
                      : titleName[0] + '月' + titleName[1] + '日'
                  }
                </div>
                <div style="padding: 6px 0 4px 0;font-size: 14px;color: #333333;width:100%;font-weight:bold;">${subname}</div>
                <ul style="border-bottom:1px solid #d9d9d9;width:100%;">${liBox}</ul>
                <ul style="font-size: 14px;color: #333333;width:100%;padding-top:8px;">
                  ${liBoxT}
                </ul>
              </div>`;
      return result1;

      // if(index==0){
      // 	return '随便用'+item.data+'年'
      // }else{
      // 	return '其他我没改'+item.data+'天'
      // }
      console.log(opts, 'opts==========');
      console.log(item, 'item==========');
      console.log(index, 'index==========');
      console.log(category, 'category==========');
      let liBox = '',
        liBoxT = '',
        labelname = '',
        valP = 0,
        sublabelname = '',
        subvalP = 0,
        subname = '销量';
      let titleName1 = category.split('/') || [];
      opts.series.forEach((e) => {
        if (e.type == 'line') {
          liBoxT += `<li style="display: flex;justify-content: space-between;width:100%;">
                      <span style="color: #333333;font-weight:bold;">销售价格</span>
                      <span style="color: #333333;font-weight:bold;">${
                        Math.round(e.data[index] * 100) / 100
                      }</span>
                      </li>`;
        } else {
          if (e.type == 'column') {
            labelname = e.name;
            valP = e.data[index];
          } else if (e.seriesName.indexOf('销售量') != -1) {
            subname = '采购量/销量';
            liBox += `<li style="display: flex;justify-content: space-between;padding-bottom:4px;width:100%;">
                      <span style="color: #666666">${e.legendShape}${labelname}</span>
                      <span style="color: #333333;font-weight:bold;">${valP}/${e.data[index]}</span>
                    </li>`;
          } else {
            subname = '销量';
            liBox += `<li style="display: flex;justify-content: space-between;padding-bottom:4px;width:100%;">
                      <span style="color: #666666">${e.legendShape}${e.name}</span>
                      <span style="color: #333333;font-weight:bold;">${e.data[index]}</span>
                    </li>`;
          }
        }
      });
      const result = `<div style="min-width: 200px;border:none;">
                <div style="padding:4px 0 4px 0;text-align:left;width:100%;font-size: 16px;font-weight:bold;color: #000000;border-bottom:1px solid #d9d9d9;">
                  ${
                    titleName[0].length > 2
                      ? titleName[0] + '年' + titleName[1] + '月'
                      : titleName[0] + '月' + titleName[1] + '日'
                  }
                </div>
                <div style="padding: 6px 0 4px 0;font-size: 14px;color: #333333;width:100%;font-weight:bold;">${subname}</div>
                <ul style="border-bottom:1px solid #d9d9d9;width:100%;">${liBox}</ul>
                <ul style="font-size: 14px;color: #333333;width:100%;padding-top:8px;">
                  ${liBoxT}
                </ul>
              </div>`;
      return result;
    },
    pieDemo: function (val, index, series, opts) {
      if (index !== undefined) {
        return series[index].name + '：' + series[index].data + '元';
      }
    }
  },
  //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
  demotype: {
    //我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
    type: 'line',
    color: color,
    padding: [15, 10, 0, 15],
    xAxis: {
      disableGrid: true
    },
    yAxis: {
      gridType: 'dash',
      dashLength: 2
    },
    legend: {},
    extra: {
      line: {
        type: 'curve',
        width: 2
      }
    }
  },
  //下面是自定义配置，请添加项目所需的通用配置
  pie: {
    type: 'pie',
    color: color,
    padding: [5, 5, 5, 5],
    extra: {
      pie: {
        activeOpacity: 0.5,
        activeRadius: 10,
        offsetAngle: 0,
        labelWidth: 15,
        border: true,
        borderWidth: 3,
        borderColor: '#FFFFFF'
      }
    }
  },
  ring: {
    type: 'ring',
    color: color,
    padding: [5, 5, 5, 5],
    rotate: false,
    dataLabel: true,
    legend: {
      show: true,
      position: 'right',
      lineHeight: 25
    },
    title: {
      name: '收益率',
      fontSize: 15,
      color: '#666666'
    },
    subtitle: {
      name: '70%',
      fontSize: 25,
      color: '#7cb5ec'
    },
    extra: {
      ring: {
        ringWidth: 30,
        activeOpacity: 0.5,
        activeRadius: 10,
        offsetAngle: 0,
        labelWidth: 15,
        border: true,
        borderWidth: 3,
        borderColor: '#FFFFFF'
      }
    }
  },
  rose: {
    type: 'rose',
    color: color,
    padding: [5, 5, 5, 5],
    legend: {
      show: true,
      position: 'left',
      lineHeight: 25
    },
    extra: {
      rose: {
        type: 'area',
        minRadius: 50,
        activeOpacity: 0.5,
        activeRadius: 10,
        offsetAngle: 0,
        labelWidth: 15,
        border: false,
        borderWidth: 2,
        borderColor: '#FFFFFF'
      }
    }
  },
  word: {
    type: 'word',
    color: color,
    extra: {
      word: {
        type: 'normal',
        autoColors: false
      }
    }
  },
  funnel: {
    type: 'funnel',
    color: color,
    padding: [15, 15, 0, 15],
    extra: {
      funnel: {
        activeOpacity: 0.3,
        activeWidth: 10,
        border: true,
        borderWidth: 2,
        borderColor: '#FFFFFF',
        fillOpacity: 1,
        labelAlign: 'right'
      }
    }
  },
  map: {
    type: 'map',
    color: color,
    padding: [0, 0, 0, 0],
    dataLabel: true,
    extra: {
      map: {
        border: true,
        borderWidth: 1,
        borderColor: '#666666',
        fillOpacity: 0.6,
        activeBorderColor: '#F04864',
        activeFillColor: '#FACC14',
        activeFillOpacity: 1
      }
    }
  },
  arcbar: {
    type: 'arcbar',
    color: color,
    title: {
      name: '百分比',
      fontSize: 25,
      color: '#00FF00'
    },
    subtitle: {
      name: '默认标题',
      fontSize: 15,
      color: '#666666'
    },
    extra: {
      arcbar: {
        type: 'default',
        width: 12,
        backgroundColor: '#E9E9E9',
        startAngle: 0.75,
        endAngle: 0.25,
        gap: 2
      }
    }
  },
  line: {
    type: 'line',
    color: color,
    padding: [15, 10, 0, 15],
    xAxis: {
      disableGrid: true
    },
    yAxis: {
      gridType: 'dash',
      dashLength: 2
    },
    legend: {},
    extra: {
      line: {
        type: 'straight',
        width: 2,
        activeType: 'hollow'
      }
    }
  },
  tline: {
    type: 'line',
    color: color,
    padding: [15, 10, 0, 15],
    xAxis: {
      disableGrid: false,
      boundaryGap: 'justify'
    },
    yAxis: {
      gridType: 'dash',
      dashLength: 2,
      data: [
        {
          min: 0,
          max: 80
        }
      ]
    },
    legend: {},
    extra: {
      line: {
        type: 'curve',
        width: 2,
        activeType: 'hollow'
      }
    }
  },
  tarea: {
    type: 'area',
    color: color,
    padding: [15, 10, 0, 15],
    xAxis: {
      disableGrid: true,
      boundaryGap: 'justify'
    },
    yAxis: {
      gridType: 'dash',
      dashLength: 2,
      data: [
        {
          min: 0,
          max: 80
        }
      ]
    },
    legend: {},
    extra: {
      area: {
        type: 'curve',
        opacity: 0.2,
        addLine: true,
        width: 2,
        gradient: true,
        activeType: 'hollow'
      }
    }
  },
  column: {
    type: 'column',
    color: color,
    padding: [15, 15, 0, 5],
    xAxis: {
      disableGrid: true
    },
    yAxis: {
      data: [{ min: 0 }]
    },
    legend: {},
    extra: {
      column: {
        type: 'group',
        width: 30,
        activeBgColor: '#000000',
        activeBgOpacity: 0.08
      }
    }
  },
  mount: {
    type: 'mount',
    color: color,
    padding: [15, 15, 0, 5],
    xAxis: {
      disableGrid: true
    },
    yAxis: {
      data: [{ min: 0 }]
    },
    legend: {},
    extra: {
      mount: {
        type: 'mount',
        widthRatio: 1.5
      }
    }
  },
  bar: {
    type: 'bar',
    color: color,
    padding: [15, 30, 0, 5],
    xAxis: {
      boundaryGap: 'justify',
      disableGrid: false,
      min: 0,
      axisLine: false
    },
    yAxis: {},
    legend: {},
    extra: {
      bar: {
        type: 'group',
        width: 30,
        meterBorde: 1,
        meterFillColor: '#FFFFFF',
        activeBgColor: '#000000',
        activeBgOpacity: 0.08
      }
    }
  },
  area: {
    type: 'area',
    color: color,
    padding: [15, 15, 0, 15],
    xAxis: {
      disableGrid: true
    },
    yAxis: {
      gridType: 'dash',
      dashLength: 2
    },
    legend: {},
    extra: {
      area: {
        type: 'straight',
        opacity: 0.2,
        addLine: true,
        width: 2,
        gradient: false,
        activeType: 'hollow'
      }
    }
  },
  radar: {
    type: 'radar',
    color: color,
    padding: [5, 5, 5, 5],
    dataLabel: false,
    legend: {
      show: true,
      position: 'right',
      lineHeight: 25
    },
    extra: {
      radar: {
        gridType: 'radar',
        gridColor: '#CCCCCC',
        gridCount: 3,
        opacity: 0.2,
        max: 200,
        labelShow: true
      }
    }
  },
  gauge: {
    type: 'gauge',
    color: color,
    title: {
      name: '66Km/H',
      fontSize: 25,
      color: '#2fc25b',
      offsetY: 50
    },
    subtitle: {
      name: '实时速度',
      fontSize: 15,
      color: '#1890ff',
      offsetY: -50
    },
    extra: {
      gauge: {
        type: 'default',
        width: 30,
        labelColor: '#666666',
        startAngle: 0.75,
        endAngle: 0.25,
        startNumber: 0,
        endNumber: 100,
        labelFormat: '',
        splitLine: {
          fixRadius: 0,
          splitNumber: 10,
          width: 30,
          color: '#FFFFFF',
          childNumber: 5,
          childWidth: 12
        },
        pointer: {
          width: 24,
          color: 'auto'
        }
      }
    }
  },
  candle: {
    type: 'candle',
    color: color,
    padding: [15, 15, 0, 15],
    enableScroll: true,
    enableMarkLine: true,
    dataLabel: false,
    xAxis: {
      labelCount: 4,
      itemCount: 40,
      disableGrid: true,
      gridColor: '#CCCCCC',
      gridType: 'solid',
      dashLength: 4,
      scrollShow: true,
      scrollAlign: 'left',
      scrollColor: '#A6A6A6',
      scrollBackgroundColor: '#EFEBEF'
    },
    yAxis: {},
    legend: {},
    extra: {
      candle: {
        color: {
          upLine: '#f04864',
          upFill: '#f04864',
          downLine: '#2fc25b',
          downFill: '#2fc25b'
        },
        average: {
          show: true,
          name: ['MA5', 'MA10', 'MA30'],
          day: [5, 10, 20],
          color: ['#1890ff', '#2fc25b', '#facc14']
        }
      },
      markLine: {
        type: 'dash',
        dashLength: 5,
        data: [
          {
            value: 2150,
            lineColor: '#f04864',
            showLabel: true
          },
          {
            value: 2350,
            lineColor: '#f04864',
            showLabel: true
          }
        ]
      }
    }
  },
  mix: {
    type: 'mix',
    color: color,
    padding: [15, 15, 0, 15],
    xAxis: {
      disableGrid: true
    },
    yAxis: {
      disabled: false,
      disableGrid: false,
      splitNumber: 5,
      gridType: 'dash',
      dashLength: 4,
      gridColor: '#CCCCCC',
      padding: 10,
      showTitle: true,
      data: []
    },
    legend: {},
    extra: {
      mix: {
        column: {
          width: 20
        }
      }
    }
  },
  scatter: {
    type: 'scatter',
    color: color,
    padding: [15, 15, 0, 15],
    dataLabel: false,
    xAxis: {
      disableGrid: false,
      gridType: 'dash',
      splitNumber: 5,
      boundaryGap: 'justify',
      min: 0
    },
    yAxis: {
      disableGrid: false,
      gridType: 'dash'
    },
    legend: {},
    extra: {
      scatter: {}
    }
  },
  bubble: {
    type: 'bubble',
    color: color,
    padding: [15, 15, 0, 15],
    xAxis: {
      disableGrid: false,
      gridType: 'dash',
      splitNumber: 5,
      boundaryGap: 'justify',
      min: 0,
      max: 250
    },
    yAxis: {
      disableGrid: false,
      gridType: 'dash',
      data: [
        {
          min: 0,
          max: 150
        }
      ]
    },
    legend: {},
    extra: {
      bubble: {
        border: 2,
        opacity: 0.5
      }
    }
  }
};

export default cfu;
